<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page">
        <a-row type="flex" :gutter="25">
          <a-col :md="9" :sm="24">
            <!-- <div class="title">
              <span>已授权店铺</span>
            </div> -->
            <a-list
              style="margin-top: 20px"
              bordered
              item-layout="vertical"
              size="large"
              :pagination="ipagination"
              :data-source="financeAmazonStoreData"
            >
              <a-list-item class="list_item" slot="renderItem" key="item.title" slot-scope="item, index" :style="{background: item.isSelected ? '#f5f5f5' :'' }" @click="fetchShopSelect(item,index)">
                <div class="shopRow">
                  <div>{{ item.storeName }}</div>
                </div>
                <div>
                  <div class="shopArea" v-if="item.detail && item.detail.length>0">
                    <span v-for="(item2, index) in item.detail" :key="index">
                      <a-tooltip>
                        <template slot="title"> 授权到期时间 </template>
                        {{ item2.region }}
                       <!-- 判断授权到期时间 -->
                       <span :style="{color: (item2.authEndTime && (moment(currentDate).isAfter(item2.authEndTime))) ? 'red' :'' }">({{ item2.authEndTime }})</span>
                      </a-tooltip>
                    </span>
                  </div>
                </div>              
              </a-list-item>
            </a-list>
          </a-col>
          <a-col :md="24 - 9" :sm="24">
            <div class="title">
              <span style="margin-left: 10px">选择授权店铺</span>
              <a-auto-complete
                v-model="parmObj.storeName"
                option-label-prop="title"
                placeholder="请输入店铺名称并选择"
                @search="fetchShop"
                @select="handleSelect"
                style="width: 76%"
                @change="handleChange"
                :allowClear="true"
              >
                <template slot="dataSource">
                  <a-select-option v-for="item in shopDataSource" :key="item.storeName" :title="item.storeName">
                    {{ item.storeName }}
                  </a-select-option>
                </template>
              </a-auto-complete>
            </div>
            <div v-for="(item, index) in countryFlagData" :key="item.region">
              <a-card hoverable :style="{ 'border-color': item.check ? '#1890FF' : '#e8e8e8' }" :title="item.regionText">
                <div slot="extra">
                  <div v-if="item.check">
                     <span class="authIcon">
                         <a-tag color="green">已授权</a-tag>    
                       </span>
                     <!-- 判断授权日期是否过期 -->
                     <span v-if="item.authEndTime && (moment(currentDate).isAfter(item.authEndTime))">
                      <a-tag color="#1890ff"  @click="resetShop(item)"  style="margin-left: 10px; cursor: pointer;">重新授权</a-tag>
                    </span>
                  </div> 
                  <div v-else>
                    <a-tag color="#1890ff" style="margin-left: 10px; cursor: pointer;"  @click="authShop(item)">授权</a-tag>
                  </div>
                </div>
                <a-card-grid v-for="(item2, index) in item.areaList" :key="index" style="text-align: center">
                  <div class="nationalFlag">
                    <img :src="item2.nationalFlag" />
                  </div>
                  <div class="countryName">{{ item2.countryName }}</div>
                </a-card-grid>
              </a-card>
            </div>
           <!-- <a-row>
              <a-button class="nextStep" size="large" type="primary" :disabled="(areaAuthNum==countryFlagData.length)?true:false"  @click="nextStepHandle"> 下一步 </a-button>
            </a-row> -->
          </a-col>
        </a-row>
      </div>

      <a-modal :visible="visibleTip" :footer="null" @cancel="closeHandle">
        <div>
          <h3 style="margin: 20px 0; font-weight: bold">复制链接到亚马逊同一浏览器进行下一步授权动作</h3>
          <div>
            <div>{{ link }}</div>
            <div style="text-align: center">
              <a-button type="primary" class="copyLink" id="tag-copy" @click="copyLink(link)">复制</a-button>
            </div>
          </div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction } from '@/api/manage'
import Clipboard from 'clipboard'
import moment from 'moment'

export default {
  mixins: [mixinDevice],
  data() {
    return {
      // iconCanada:require('@/assets/nationalFlag/icon-Canada.png'),
      visibleTip: false,

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        size: 'small',
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      financeAmazonStoreData: [], //已授权店铺列表Data
      shopDataSource: [], //授权店铺
      storeName: '', //授权店铺名称
      value: undefined, //选择的授权店铺id
      fetching: false,
      storeIdSelect: '', //选中区域
      visibleTip: false, //是否弹出modal
      disabled: true, //下一步按钮
      link: '', //链接地址
      url: {
        storeList: '/finance/financeAmazonStore/store_list', //已授权店铺列表
        list: '/finance/financeAmazonStore/list', //选择授权店铺列表
        get_auth_url: '/finance/amazon/get_auth_url', //获取授权链接
      },
      parmObj: {
        region: '',
        storeId: '',
        storeName: '',
      },
      areaAuthNum:0, //已授权区域
      currentDate:moment().format('YYYY-MM-DD'),  //当前日期
    }
  },
  created() {
    this.getCountryFlagData()
    this.getStoreList()
  },

  methods: {
    moment,
    getCountryFlagData() {
      this.countryFlagData = [
        {
          region: 'na',
          regionText: '北美',
          check: false,
          areaList: [
            {
              code: '1',
              nationalFlag: require('@/assets/nationalFlag/icon-Canada.png'),
              countryName: '加拿大',
              countryCode: 'CA',
            },
            {
              code: '2',
              nationalFlag: require('@/assets/nationalFlag/icon-meiguoguoqi.png'),
              countryName: '美国',
              countryCode: 'US',
            },
            {
              code: '3',
              nationalFlag: require('@/assets/nationalFlag/icon-moxige.png'),
              countryName: '墨西哥',
              countryCode: 'MX',
            },
            {
              code: '4',
              nationalFlag: require('@/assets/nationalFlag/icon-baxi.png'),
              countryName: '巴西',
              countryCode: 'BR',
            },
          ],
        },
        {
          region: 'eu',
          regionText: '欧洲',
          check: false,
          areaList: [
            {
              code: '5',
              nationalFlag: require('@/assets/nationalFlag/icon-Spain.png'),
              countryName: '西班牙',
              countryCode: 'ES',
            },
            {
              code: '6',
              nationalFlag: require('@/assets/nationalFlag/icon-yingguoguoqi.png'),
              countryName: '英国',
              countryCode: 'UK',
            },
            {
              code: '7',
              nationalFlag: require('@/assets/nationalFlag/icon-French.png'),
              countryName: '法国',
              countryCode: 'FR',
            },
            {
              code: '8',
              nationalFlag: require('@/assets/nationalFlag/icon-belgium.png'),
              countryName: '比利时',
              countryCode: 'BE',
            },
            {
              code: '9',
              nationalFlag: require('@/assets/nationalFlag/icon-Netherlands.png'),
              countryName: '荷兰',
              countryCode: 'NL',
            },
            {
              code: '9',
              countryCode: 'DE',
              nationalFlag: require('@/assets/nationalFlag/icon-deguoguoqi.png'),
              countryName: '德国',
            },
            {
              code: '10',
              countryCode: 'IT',
              nationalFlag: require('@/assets/nationalFlag/icon-Italy.png'),
              countryName: '意大利',
            },
            {
              code: '11',
              countryCode: 'SE',
              nationalFlag: require('@/assets/nationalFlag/icon-Sweden.png'),
              countryName: '瑞典',
            },
            {
              code: '12',
              countryCode: 'PL',
              nationalFlag: require('@/assets/nationalFlag/icon-poland.png'),
              countryName: '波兰',
            },
            {
              code: '13',
              countryCode: 'SA',
              nationalFlag: require('@/assets/nationalFlag/icon-SaudiArabia.png'),
              countryName: '沙特阿拉伯',
            },
            {
              code: '14',
              countryCode: 'EG',
              nationalFlag: require('@/assets/nationalFlag/icon-aiji.png'),
              countryName: '埃及',
            },
            {
              code: '15',
              countryCode: 'TR',
              nationalFlag: require('@/assets/nationalFlag/icon-Turkey.png'),
              countryName: '土耳其',
            },
            {
              code: '16',
              countryCode: 'AE',
              nationalFlag: require('@/assets/nationalFlag/icon-UAE.png'),
              countryName: '阿拉伯联合酋长国',
            },
            {
              code: '17',
              countryCode: 'IN',
              nationalFlag: require('@/assets/nationalFlag/icon-India.png'),
              countryName: '印度',
            },
          ],
        },
        {
          region: 'fe',
          regionText: '远东',
          check: false,
          areaList: [
            {
              code: '18',
              countryCode: 'SG',
              nationalFlag: require('@/assets/nationalFlag/icon-Turkey.png'),
              countryName: '新加坡',
            },
            {
              code: '19',
              countryCode: 'AU',
              nationalFlag: require('@/assets/nationalFlag/icon-Australia.png'),
              countryName: '澳大利亚',
            },
            {
              code: '20',
              countryCode: 'JP',
              nationalFlag: require('@/assets/nationalFlag/icon-riben.png'),
              countryName: '日本',
            },
          ],
        },
      ]
    },
    //翻页
    onPageChange(page, pageSize) {
      this.ipagination.current = page
      this.getStoreList()
    },
    //切换每页数量
    onSizeChange(page, pageSize) {
      this.ipagination.pageSize = pageSize
      this.ipagination.current = 1
      this.getStoreList()
    },
    //点击左侧店铺
    fetchShopSelect(item,index){ 
      const isSelected = item.isSelected
      this.financeAmazonStoreData[index].isSelected = !isSelected
      //选中
      if(!isSelected){
        this.parmObj.storeId = item.storeId
        this.parmObj.storeName = item.storeName
        this.fetchShop(item.storeName,'init')
      }else{
        //取消选中
        this.parmObj.storeId = ''
        this.parmObj.storeName = ''
        this.parmObj.region = ''
        this.getCountryFlagData()  //刷新右侧授权区域
      }
    },
    //获取搜索框店铺列表
    fetchShop(storeName, option) {
      const parameterObj = {
        storeName: storeName,
        pageNo: 1,
        pageSize: 20,
      }
      getAction(this.url.storeList, parameterObj).then((res) => {
        if (res.success) {
          this.shopDataSource = res.result.records
          if (option == 'init') {
            this.handleSelect(storeName)
          }
        }
      })
    },
    //选择授权店铺
    handleSelect(value) {
      if(value){
      this.parmObj.storeName = value
      this.storeIdSelect = ''
      this.parmObj.region = ''
      this.getCountryFlagData()
      if (this.shopDataSource.length > 0) {
        const info = this.shopDataSource.filter((s) => s.storeName == value)
        this.parmObj.storeId = info.length > 0 ? info[0].storeId : ''     
        if (info.length > 0) {
            if (info[0].detail && info[0].detail.length > 0) {
              this.areaAuthNum=info[0].detail?info[0].detail.length:0
              this.countryFlagData.forEach((s) => {
                info[0].detail.forEach((d) => {
                  if (s.regionText == d.region) { 
                    s.check = true
                    s.authEndTime = d.authEndTime
                  }
                })
              })
            }          
        }
        this.shopDataSource = []
      }
      //左侧对应选中店铺
      this.financeAmazonStoreData.map(s=>{
        s.isSelected = s.storeName === value ? true : false
      })
      }
    },
    handleChange(value){
      //选中项为空
      if(!value){
        this.parmObj.storeId = ''
        this.parmObj.region = ''
        this.financeAmazonStoreData.map(s=>{
          s.isSelected = false
        })
        this.getCountryFlagData()
      }
    },
    //点击授权店铺
    authShop(value){
      if(!value.check){
      this.parmObj.region = value.region
      this.nextStepHandle()
      }
      
    },
    //选择区域
    changeArea(item, checked) {
      if (checked) {
        this.storeIdSelect = ''
        this.parmObj.region = ''
      } else {
        this.storeIdSelect = item.region
        this.parmObj.region = item.region
      }
    },
    //获取已授权店铺列表
    getStoreList(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      const parameterObj = {
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
      }
      getAction(this.url.storeList, parameterObj).then((res) => {
        if (res.success) {         
          if(res.result.records && res.result.records.length>0){
            res.result.records.map((m)=>{
              m.isSelected = false
            })
            this.financeAmazonStoreData = res.result.records
          }else{
            this.financeAmazonStoreData = []
          }
          this.ipagination.total = res.result.total ? res.result.total : 0
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    //重置店铺
    resetShop(info){
      const that=this
       const Obj = {
        region:info.region,
        storeId: that.parmObj.storeId,
      }
      that.submitArea(Obj)
      
    },
    //
    handleBlur(value) {
      if (!value) {
        this.parmObj.storeId = ''
        this.fetchShop('', 'init')
      }
    },
    //下一步
    nextStepHandle() {
      if (!this.parmObj.storeId) {
        this.$message.warning('请选择正确的店铺')
        return
      } 
      if (!this.parmObj.region) {
        this.$message.warning('请选择正确的区域')
        return
      }
      const Obj = {
        region: this.parmObj.region,
        storeId: this.parmObj.storeId,
      }
      this.submitArea(Obj)
    },
    //提交选择的店铺授权区域
    submitArea(Obj){
       getAction(this.url.get_auth_url, Obj).then((res) => {
        if (res.success) {
          this.link = res.message
          this.visibleTip = true
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //关闭弹出框
    // closeHandle() {
    //       this.visibleTip = false
    //       this.getStoreList(1)
    //       this.fetchShop(this.parmObj.storeName, 'init')
    //     }
    closeHandle() {
      this.visibleTip = false
      // this.parmObj.storeId = ''
      // this.parmObj.storeName = ''
      // this.parmObj.region = ''
     this.financeAmazonStoreData.map(s=>{
       s.isSelected = s.storeName === this.parmObj.storeName ? true : false
     })
     this.fetchShop(this.parmObj.storeName, 'init')
    },
    
    //复制链接
    copyLink(url) {
      let clipboard = new Clipboard('#tag-copy', {
        text: () => {
          return url
        },
      })
      clipboard.on('success', () => {
        this.$message.success('复制成功！')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('该浏览器不支持自动复制,请手动复制！')
        clipboard.destroy()
      })
    },
  },
}
</script>

<style  scoped>
.table-page {
  width: 70%;
  margin: auto;
}
.title {
  font-size: 20px;
  margin: 15px 0;
}
.title > span {
  margin-left: 15px;
  margin-right: 15px;
}
.shopRow {
  color: #333;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shopArea {
  margin-top: 10px;
  font-size: 12px;
  color: #8e8d8d;
}
.shopArea > span {
  margin-right: 15px;
}
.area {
  font-size: 12px;
  color: #8e8d8d;
}
.area > div {
  margin: 10px 0;
}
.nationalFlag {
  width: 50px;
  display: inline-block;
  margin: auto;
}
.nationalFlag > img {
  width: 100%;
  height: 100%;
}
.countryName {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
}
.nextStep {
  margin: 20px 10px 0 0;
  float: right;
  padding: 0 50px;
}
.copyLink {
  margin-left: 20px;
}
/deep/.ant-card-bordered {
  margin: 10px;
  border-radius: 4px;
}
/deep/.ant-list-item {
  padding: 10px;
  min-height: 73px;
}
/deep/.ant-card-grid {
  width: 12.8%;
  min-height: 82px;
  margin: 15px;
  padding: 10px 0;
}
/deep/.ant-card-head {
  border-bottom: none;
  position: relative;
}
/deep/.ant-card-head-title {
  margin-left: 30px;
}
/deep/.ant-card-extra {
  padding-top: 20px;
}
/deep/.ant-list-bordered .ant-list-pagination {
  margin: 16px 0px;
  /* text-align: left; */
}
.list_item{
  cursor: pointer;
}
.authIcon{
  position: absolute;
  left: 0px;
  top: 0px;
}
.cardList :hover{
  border: 1px solid blue;
}
</style>
